<!DOCTYPE html>
<html lang="zh"   xmlns:th="http://www.thymeleaf.org"
   xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" th:with="blogConfig=${@configTag.getConfigValueMap('zgblog')}" >ost=${@articleTag.getWebArticleHtmlById(postId)}">

<head>
	<th:block th:include="zgblog/blog_include :: blogHeader(title=${blogConfig['oly.web.title']+'-'+post.articleTitle},
keywords=${blogConfig['oly.web.keywords']+','+post.keywords},
description=${post.description},
blogConfig=${blogConfig})" />
</head>

<body>
	<th:block th:include="zgblog/blog_include::blogMainColumn()" />
	<!-- 主体部分 -->
	<section class="zgblog-main-box">
		<div class="layui-row ">
			<div class="layui-col-md9  zgblog-left-box" id="miao-left">
				<div class="zgblog-left-content">
					<th:block th:include="zgblog/blog_include::blogArticle(post=${post})" />
				</div>
			</div>

			<!-- 主体部分右边 -->
			<div class="layui-col-md3 zgblog-right-box">
				<th:block th:include="zgblog/blog_include::blogRightCommon" />
			</div>
		</div>

	</section>
	<script id="commentTemplate" type="text/html">
			<ul>
				{{# layui.each(d.rows, function(index, item){ }}
					<li>
						<div class="comment-parent">
							{{# $.get('/api/user/getUser/'+item.fromBy,function(res){ let userFrom=res.data; }}
							<section>
								<div class="comment-head">
									<a class="comment-name" rel="nofollow"><img src="{{userFrom.avatar}}"><br />
										<span>{{userFrom.userName}}</span>
									</a>
									<span class="comment-ua">{{item.userBower}}</span>
									<span class="comment-index">{{(index+1)+(d.pageNum-1)*d.pageSize}}楼</span>
								</div>
								<br />
								<div class="comment-content">
									<div >{{item.content}}</div>
								</div>
								<div class="comment-footer">
									<span class="footer-time layui-text" >
										{{item.createTime}}</span>

									<!--回复需要文章id,评论id,用户id-->
									<span at="148" class="footer-reback layui-btn layui-btn-xs layui-btn-normal comment-ok"
										data-comment="{{item.commentId}},{{item.articleId}},{{userFrom.userId}}">回复</span>
								</div>
							</section>
							{{# }) }}
							<hr>
						</div>
						<div class="comment-child">
								<ul >
								{{# layui.each(item.childrenPageData.rows, function(index2, item2){ }}
									<li>
										<section >
										{{#	$.get('/api/user/getUser/'+item2.fromBy,function(res2){let userFrom2=res2.data; }}
											<div class="comment-head">
												<a class="comment-name" rel="nofollow"><img
														src="{{userFrom2.avatar}}"><br />
													<span>{{userFrom2.userName}}</span>
												</a>
												<span class="comment-ua">{{item2.userBower}}</span>
												<span class="comment-index">{{(index2+1)+(item.childrenPageData.pageNum-1)*item.childrenPageData.pageSize}}楼</span>
											</div>
										{{#	}) }}
										{{#	 $.get('/api/user/getUser/'+item2.replyBy,function(reply){let replyFrom2=reply.data; }}
											<br />
											<div class="comment-content">
												<span>回复@<a src="javascript:void(0)">{{replyFrom2.userName}}
													</a>：</span><span>{{{item2.content}}</span>
											</div>
											<div class="comment-footer">
												<span class="footer-time layui-text">{{item2.createTime}}
													</span>

												<!--回复需要文章id,评论id,用户id-->
												<span at="148"
													class="footer-reback layui-btn layui-btn-xs layui-btn-normal comment-ok"
													data-comment="{{item2.parentId}},{{item2.articleId}},{{item2.fromBy}}">回复</span>
											</div>
											{{#	}) }}
										</section>
										<hr>
									</li>
								{{# }) }}
								</ul>
								{{# if(item.childrenPageData.pages>1){let commentId=item.commentId; }}
								<div class="layui-box layui-laypage layui-laypage-default">
									{{# if(item.childrenPageData.pageNum>1){let num=item.childrenPageData.pageNum-1; }}
									<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},this)"  class="page-this">上一页</a>
									{{# } }}
									{{# if(item.childrenPageData.pages>item.childrenPageData.pageNum){let num=item.childrenPageData.pageNum+1; }}	
									<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},this)" class="page-this" >下一页</a>
									{{# } }}
								</div>
								{{# } }}		
						</div>		
					</li>
				{{#  }) }}
			</ul>
			{{# if(d.pages>1){ let articleId=$('#articleId').val(); }}
			<div class="layui-box layui-laypage layui-laypage-default">
				{{# if(d.pageNum>1){ let num=d.pageNum-1; }}
				<a href="javascript:void(0)" onclick="getOnePage({{articleId}},{{num}})" class="page-this">上一页</a>
				{{# } }}
				{{# if(d.pages>d.pageNum){	let num=d.pageNum+1;
				 }}	
				<a href="javascript:void(0)" onclick="getOnePage({{articleId}},{{num}})" class="page-this" >下一页</a>
				{{# } }}
			</div>
			{{# } }}
	</script>

	<script id="commentChild" type="text/html">
			<ul >
			{{# layui.each(d.rows, function(index2, item2){ }}
				<li>
					<section >
					{{#	$.get('/api/user/getUser/'+item2.fromBy,function(res2){let userFrom2=res2.data; }}
						<div class="comment-head">
							<a class="comment-name" rel="nofollow"><img
									src="{{userFrom2.avatar}}"><br />
								<span>{{userFrom2.userName}}</span>
							</a>
							<span class="comment-ua">{{item2.userBower}}</span>
							<span class="comment-index">{{(index2+1)+(d.pageNum-1)*d.pageSize}}楼</span>
						</div>
					{{#	}) }}
					{{#	 $.get('/api/user/getUser/'+item2.replyBy,function(reply){let replyFrom2=reply.data; }}
						<br />
						<div class="comment-content">
							<span>回复@<a src="javascript:void(0)">{{replyFrom2.userName}}
								</a>：</span><span>{{{item2.content}}</span>
						</div>
						<div class="comment-footer">
							<span class="footer-time layui-text">{{item2.createTime}}
								</span>

							<!--回复需要文章id,评论id,用户id-->
							<span at="148"
								class="footer-reback layui-btn layui-btn-xs layui-btn-normal comment-ok"
								data-comment="{{item2.parentId}},{{item2.articleId}},{{item2.fromBy}}">回复</span>
						</div>
						{{#	}) }}
					</section>
					<hr>
				</li>
			{{# }) }}
			</ul>
			{{# if(d.pages>1){ let commentId=d.commentId; }}
			<div class="layui-box layui-laypage layui-laypage-default">
				{{# if(d.pageNum>1){ let num=d.pageNum-1; }}
				<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},this)" class="page-this">上一页</a>
				{{# } }}
				{{# if(d.pages>d.pageNum){	let num=d.pageNum+1;
				 }}	
				<a href="javascript:void(0)" onclick="getTwoPage({{commentId}},{{num}},this)" class="page-this" >下一页</a>
				{{# } }}
			</div>
			{{# } }}		
		</script>

	<!-- 底部导航 -->
	<th:block th:include="zgblog/blog_include::blogBottom" />
	<th:block th:include="zgblog/blog_include::blog_footer_js" />
	<script th:inline="JavaScript">
		var getOnePage, getTwoPage;
		$.ajaxSettings.async = false;
		layui.use(['element', 'layer', 'layedit', 'laytpl'], function () {

			var element = layui.element;
			var laytpl = layui.laytpl;
			var layedit = layui.layedit;
			var layer = this.layer;

			getOnePage = function getOnePage(articleId, pageNum) {
				$.get(ctx + "comment/parentPage?pageNum=" + pageNum + "&articleId=" + articleId, function (res) {
                 
					if (res.code == 0) {
						laytpl(commentTemplate.innerHTML).render(res.data, function (html) {
							$("#commentContent").empty();
							$("#commentContent").append(html);

						});
					}

				});

			};
			getTwoPage = function getTwoPage(parentId,pageNum,e) {
				let pa=$(e).closest('.comment-child');
				$.get(ctx + "comment/childPage?pageNum=" + pageNum + "&parentId=" + parentId, function (res) {	
					if (res.code == 0) {
						res.data.commentId=parentId;
						laytpl(commentChild.innerHTML).render(res.data, function (html) {
							pa.empty();
							pa.append(html);

						});
					}

				});

			}


			function toLogin() {
				layer.confirm('你还未登陆!', {
					btn: ['登陆', '取消'] //按钮
				}, function () {
					location.href = ctx + 'zuser/zgblog/user/login';
				}, function () {
					layer.close();
				});
			}

			//点赞，踩，分享，收藏，评分
			const lookUrl = ctx + "blog/record/addLookRecord",
				likeUrl = ctx + "blog/record/addLikeRecord",
				nastyUrl = ctx + "blog/record/addNastyRecord",
				shareUrl = ctx + "blog/record/addShareRecord",
				scoreUrl = ctx + "blog/record/addScoreRecord",
				collectUrl = ctx + "blog/record/addCollectRecord",
				commentUrl = ctx + "comment",
				userUrl = ctx + "user";
			const userId = $('#userId').val();
			const postRecord = {
				lookRecord: function () {
					this.ajaxPost();
				},
				likeRecord: function () {

				},
				nastyRecord: function () {

				},
				shareRecord: function () {

				},
				scoreRecord: function () {

				},
				collectRecord: function () {

				},
				ajaxPost: function (url, data, callback) {
					$.post(url, data, function (result) {

					});
				}
			};
			$.post(lookUrl, {
				articleId: $("#articleId").val()
			}, function (result) {

			});
			$("#post-like").click(function () {
				if (userId == '') {
					toLogin();
				} else {
					$.post(likeUrl, {
						articleId: $("#articleId").val()
					}, function (result) {
						layer.msg(result.msg);
					});
				}
			});
			$("#post-nasty").click(function () {
				if (userId == '') {
					toLogin();
				} else {
					$.post(nastyUrl, {
						articleId: $("#articleId").val()
					}, function (result) {
						layer.msg(result.msg);
					});
				}
			});
			//编辑器索引
			var ind;

			$("#commentContent").on('click', '.comment-ok', function () {
				var commentData = $(this).data().comment.split(","); // 在每个逗号(,)处进行分解。
				var dataObj = {
					'parentId': commentData[0],
					'articleId': commentData[1],
					'replyBy': commentData[2],
					'fromBy': userId
				};
				if (userId == '') {
					toLogin();
				} else {
					$.get(userUrl + "/isLogin/" + userId, function (result) {
						if (result.code == 0) {
							layer.open({
								type: 1,
								title: '评论',
								closeBtn: 0, //不显示关闭按钮
								anim: 2,
								area: '340px',
								offset: '100px',
								shadeClose: true, //开启遮罩关闭
								content: '<div ><textarea id="demo" style="display: none;"></textarea></div>',
								success: function (layero, index) {
									ind = layedit.build('demo', {
										tool: [
											'strong' //加粗
											, 'italic' //斜体
											, 'underline' //下划线
											, 'del' //删除线
											, '|' //分割线
											, 'left' //左对齐
											, 'center' //居中对齐
											, 'right' //右对齐
											, 'link' //超链接
											, 'unlink' //清除链接
										]
									}); //建立编辑器
								},
								btn: ['取消', '评论'],
								yes: function (index, layero) {
									layer.close(index);
								},
								btn2: function (index, layero) {
									var content = layedit.getContent(ind);
									if (content == '') {
										layer.msg("评论不能为空！");
									} else {
										dataObj['content'] = content;
										$.post(commentUrl + "/add", dataObj, function (
											result) {
											if (result.code == 0) {
												location.reload();
											} else {
												layer.msg(result.msg);
											}
										})
									}
								},
							});
						} else {
							location.reload();
						}
					})
				}
			});

		});
	</script>
</body>

</html>
